<!-- 数据处理规则 -->

<template>
  <div class="mark-rule">
    <div class="rule-line">
      <div class="rule-label">数据标注状态</div>
      <div class="py-8">
        <a-radio-group v-model:value="ruleForm.isMark" @change="onIsMarkChange">
          <a-radio :value="0">无标注信息</a-radio>
          <a-radio :value="1">有标注信息</a-radio>
        </a-radio-group>
      </div>
    </div>
    <div class="rule-line">
      <div class="rule-label">数据导入格式</div>
      <div class="format-value">
        <div class="flex w-[100%]">
          <a-select
            v-model:value="importFormatSelectValue"
            class="flex-1"
            placeholder="请选择数据导入格式"
            @change="importFormatSelectChange"
          >
            <a-select-option v-if="isRuleLinShow('excel')" value="excel">EXCEL文件</a-select-option>
            <a-select-option v-if="isRuleLinShow('txt')" value="txt">TXT文件</a-select-option>
            <a-select-option v-if="isRuleLinShow('zip')" value="zip">压缩包</a-select-option>
            <a-select-option v-if="isRuleLinShow('imgImg')" value="imgImg">图片</a-select-option>
            <a-select-option v-if="isRuleLinShow('imgZip')" value="imgZip">压缩包</a-select-option>
          </a-select>

          <div class="w-46 ml-8 fc">
            <a-button
              v-if="hasImportExplain(importFormatSelectValue)"
              type="link"
              class="icon-with-btn"
              @click="openImportExplain(importFormatSelectValue)"
            >
              <i class="iconfont icon-file-text-line"></i>
              说明
            </a-button>
          </div>
        </div>
        <a-radio-group v-if="importFormatSelectValue === 'excel'" v-model:value="ruleForm.excel.type">
          <a-radio :value="1">有表头</a-radio>
          <a-radio :value="0">无表头</a-radio>
        </a-radio-group>

        <!-- TODO:因分隔符导致测试及后端bug过多，暂时隐藏 -->
        <!-- <div v-else-if="importFormatSelectValue === 'txt'" class="flex w-[100%]">
          <a-select v-model:value="txtSelectType" class="flex-1" placeholder="请选择分隔符" disabled @change="onTextSelectTypeChange">
            <a-select-option value="\n">换行符</a-select-option>
            <a-select-option value="\s">空格</a-select-option>
            <a-select-option value="">自定义</a-select-option>
          </a-select>
          <a-form-item
            v-if="txtSelectType === ''"
            :rules="[{ required: true, trigger: 'change', message: '请输入分隔符' }]"
            :name="['taskRule', 'txt', 'type']"
            class="ml-24 flex-1"
          >
            <g-input v-model:value="ruleForm.txt.type" :maxlength="1" placeholder="请输入分隔符" />
          </a-form-item>
          <div v-else class="flex-1"></div>
        </div> -->

        <!-- 文字-有标注-压缩包 -->
        <a-radio-group v-else-if="importFormatSelectValue === 'zip' && isMark" v-model:value="ruleForm.zip.type">
          <!-- 文本相似度做特殊处理 -->
          <a-radio v-if="subTaskType === DmpSubTaskType.textSimilarity" :value="1">
            .txt
            <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('text-zip-txt')">
              <i class="iconfont icon-file-text-line"></i>
              说明
            </a-button>
          </a-radio>
          <a-radio v-else :value="1">
            平台默认格式
            <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('format')">
              <i class="iconfont icon-file-text-line"></i>
              说明
            </a-button>
          </a-radio>
          <a-radio :value="2">
            .json
            <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('json')">
              <i class="iconfont icon-file-text-line"></i>
              说明
            </a-button>
          </a-radio>
        </a-radio-group>
        <!-- 图片-有标注-压缩包 -->
        <a-radio-group
          v-else-if="importFormatSelectValue === 'imgZip' && isMark"
          v-model:value="ruleForm.imgZip.type"
          class="gap-y-8 flex flex-wrap"
        >
          <a-radio :value="1">
            <div class="fbc">
              <div class="w-120">平台默认格式</div>
              <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('imgZipFormat')">
                <i class="iconfont icon-file-text-line"></i>
                说明
              </a-button>
            </div>
          </a-radio>
          <a-radio v-if="[DmpSubTaskType.imgObjDetect].includes(subTaskType)" :value="2">
            <div class="fbc">
              <div class="w-120">xml（特指voc）</div>
              <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('imgZipXml')">
                <i class="iconfont icon-file-text-line"></i>
                说明
              </a-button>
            </div>
          </a-radio>
          <a-radio v-if="[DmpSubTaskType.imgObjDetect].includes(subTaskType)" :value="3">
            <div class="fbc">
              <div class="w-120">json（特指coco）</div>
              <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('imgZipJson')">
                <i class="iconfont icon-file-text-line"></i>
                说明
              </a-button>
            </div>
          </a-radio>
          <a-radio v-if="[DmpSubTaskType.imgClass].includes(subTaskType)" :value="4">
            <div class="fbc">
              <div class="w-120">以文件夹命名分类</div>
              <a-button type="link" class="icon-with-btn ml-8" @click="openImportExplain('imgZipDir')">
                <i class="iconfont icon-file-text-line"></i>
                说明
              </a-button>
            </div>
          </a-radio>
        </a-radio-group>
      </div>
    </div>
  </div>

  <import-explain v-model:open="showImportExplain" :sub-task-type="subTaskType" :file-type="fileType" :has-mark-info="isMark" />
</template>

<script lang="ts" setup>
  import { SelectValue } from 'ant-design-vue/es/select'
  import { computed, ref, watch } from 'vue'

  import { DmpSubTaskType, ImportExplainFileType } from '../../../types'
  import { getFileRuleLineShow, getImportExplain } from '../../../utils'
  import ImportExplain from '../ImportExplain.vue'

  interface Props {
    // 子类型字段
    subTaskType: DmpSubTaskType
    // 处理表单
    taskRule: any
  }

  const props = withDefaults(defineProps<Props>(), {})

  const emits = defineEmits<{
    (e: 'update:taskRule', params: any): void
    (e: 'importFormatSelectChange', params: any): void
    (e: 'onIsMarkChange'): void
  }>()

  const ruleForm = ref({
    isMark: 0,
    excel: {
      use: false,
      type: 0
    },
    txt: {
      use: false,
      type: ''
    },
    zip: {
      use: false,
      type: 1
    },
    imgImg: {
      use: false,
      type: 1
    },
    imgZip: {
      use: false,
      type: 1
    }
  })
  //数据导入格式选择
  const importFormatSelectValue = ref<ImportExplainFileType>('zip')
  // 有无标注信息
  const isMark = computed(() => ruleForm.value.isMark === 1)

  /* 同步表单数据 */
  watch(
    ruleForm,
    () => {
      console.log('ruleForm.value', ruleForm.value)

      emits('update:taskRule', ruleForm.value)
    },
    { deep: true }
  )
  /* 切换任务子类型，重置输入导入格式 */
  watch(
    () => props.subTaskType,
    () => onSubTaskTypeChange()
  )

  const onSubTaskTypeChange = () => {
    resetIsMark()
    resetImportFormatSelectValue()
    resetRuleLine()
  }
  const onIsMarkChange = () => {
    resetImportFormatSelectValue()
    resetRuleLine()
    emits('onIsMarkChange')
  }

  const importFormatSelectChange = (e: any) => {
    resetRuleLine()
    emits('importFormatSelectChange', e)
  }

  /** 重置有无选择标注信息 */
  const resetIsMark = () => {
    ruleForm.value.isMark = 0
  }

  /** 重置导入格式选择 */
  const resetImportFormatSelectValue = () => {
    const arr = ['excel', 'txt', 'zip', 'imgImg', 'imgZip'] as ImportExplainFileType[]
    importFormatSelectValue.value = arr.find((key: ImportExplainFileType) => isRuleLinShow(key)) || 'txt'
  }

  /** 重置导入格式 */
  const resetRuleLine = () => {
    ruleForm.value.excel.use = false
    ruleForm.value.excel.type = 0

    ruleForm.value.txt.use = false
    ruleForm.value.txt.type = '\\n'
    txtSelectType.value = '\\n'

    ruleForm.value.zip.use = false
    ruleForm.value.zip.type = 1

    ruleForm.value.imgImg.use = false
    ruleForm.value.imgImg.type = 1

    ruleForm.value.imgZip.use = false
    ruleForm.value.imgZip.type = 1

    ruleForm.value[importFormatSelectValue.value].use = true
    console.log('ruleForm1', importFormatSelectValue.value)
  }

  /** 是否显示选项 */
  const isRuleLinShow = (type: ImportExplainFileType) => {
    return getFileRuleLineShow(props.subTaskType, type, isMark.value)
  }

  /* txt换行符-------------------------------------------------------------------------------------- */
  const txtSelectType = ref<string>()

  const onTextSelectTypeChange = (value: SelectValue) => {
    ruleForm.value.txt.type = value as string
  }

  /* 导入说明-------------------------------------------------------------------------------------- */
  const showImportExplain = ref(false)
  const fileType = ref<ImportExplainFileType>('txt')

  const openImportExplain = (type: ImportExplainFileType) => {
    fileType.value = type
    showImportExplain.value = true
  }

  /** 获取是否有导入说明 */
  const hasImportExplain = (type: ImportExplainFileType) => {
    return !!getImportExplain(props.subTaskType, type, isMark.value)
  }
  /* init-------------------------------------------------------------------------------------- */
  resetImportFormatSelectValue()
  ruleForm.value[importFormatSelectValue.value].use = true
  emits('update:taskRule', ruleForm.value)

  defineExpose({
    ruleForm
  })
</script>

<style lang="less" scoped>
  .mark-rule {
    padding: 20px 24px;
    background: #fff;
    border: 1px solid @border1;
    border-radius: 6px;

    .rule-line {
      display: flex;

      .rule-label {
        padding: 8px 0;
        width: 120px;
        color: @text02;

        .font14b();
      }

      .format-value {
        display: flex;
        align-items: flex-start;
        padding: 8px 26px 8px 8px;
        background: #fafafa;
        border-radius: 6px;
        flex: 1;
        flex-direction: column;
        gap: 12px;

        .ant-form-item {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
